<template>
  <!-- 话题分类页面 -->
  <view>
    <!-- 话题分类 -->
    <uni-nav-bar
      statusBar
      status-bar
      left-icon="left"
      @clickLeft="clickLeft"
      :title="title"
    ></uni-nav-bar>

    <scroll-view
      :scroll-x="true"
      :show-scrollbar="false"
      class="scroll"
      :scroll-into-view="scrollinto"
      :scroll-with-animation="true"
    >
      <view
        v-for="(item, index) in topicclass"
        :key="index"
        class="scroll-item font-md"
        :class="index === tab ? 'mainColor font-weight font-size font-lg' : ''"
        @click="tabClick(index)"
        :id="'tab' + index"
      >
        {{ item.classname }}
      </view>
    </scroll-view>

    <swiper
      :duration="200"
      :current="tab"
      easing-function="easeInOutCubic"
      @change="swiperTab"
      :style="'height:' + height + 'px'"
    >
      <swiper-item v-for="(list, index) in topicclass" :key="index">
        <scroll-view :scroll-y="true" :style="'height:' + height + 'px'">
          <template v-if="toppicList.length !== 0">
            <!-- <block v-for="(item, index) in toppicList" :key="index"> -->
            <!-- {{ item }} -->
            <topicListVue
              :topPicList="toppicList"
              :title="title"
            ></topicListVue>
            <view class="divBg"> </view>
            <!-- </block> -->
          </template>
          <template v-else> <noDate></noDate> </template>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import noDate from "@/components/common/noDate.vue";
import topicListVue from "../../components/common/topicList.vue";

export default {
  components: {
    topicListVue,
    noDate,
  },
  data() {
    return {
      height: "500",
      scrollinto: "",
      topicclass: [],
      tab: 0,
      toppicList: [],
      title: "话题分类",
    };
  },
  onLoad(e) {
    console.log(e);
    if (e.input) {
      this.title = "选择话题";
    }
    this.getClass();
    // 计算高度
    uni.getSystemInfo({
      success: (res) => {
        this.height = res.windowHeight - uni.upx2px(120);
      },
    });
  },
  methods: {
    //   返回
    clickLeft() {
      uni.navigateBack({});
    },
    // 获取顶部数据
    getClass() {
      uni.request({
        url: "https://ceshi2.dishait.cn/api/v1/topicclass",
        success: (res) => {
          console.log(res);
          if (res.statusCode === 200) {
            this.topicclass = res.data.data.list;
            this.gettoPic();
          }
        },
      });
    },
    // 切换
    tabClick(index) {
      this.tab = index;
      this.scrollinto = "tab" + index;
    },
    // 获取文章数据
    gettoPic() {
      uni.request({
        url: `https://ceshi2.dishait.cn/api/v1/topicclass/${
          this.tab + 1
        }/topic/1`,
        success: (res) => {
          if (res.statusCode === 200) {
            this.toppicList = res.data.data.list;
          }
        },
      });
    },
    swiperTab(e) {
      this.tab = e.detail.current;
      this.scrollinto = "tab" + e.detail.current;
      this.gettoPic();
    },
  },
};
</script>

<style></style>
